<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/" prefix="util" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="core" %>
<util:template titulo="Compromisso">
    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            <form role="form" method="get" name="form-compromisso" action="intranet/compromisso/confirmar" onsubmit="selecionaTodos();">
                <div class="panel-heading">
                    <h1 class="panel-title"><c:if test="${not empty id}">Editar</c:if><c:if test="${empty id}">Adicionar</c:if> compromisso</h1>
                    </div>
                <c:if test="${not empty id}">
                    <input class="form-control" type="hidden" name="id" value="${id}">
                </c:if>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group row">
                            <label for="assunto" class="col-md-2 control-label">Assunto:</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="assunto" name="assunto"
                                       value ="${compromisso.assunto}" placeholder="Informe o assunto">
                            </div>
                        </div>

                        <div class="form-group row">


                            <label for="local" class="col-md-2 control-label">Local: </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="local" name="local"
                                       value ="${compromisso.localCompromisso}" placeholder="Informe o local">
                            </div>

                        </div>
                        <div class="form-group row">
                            <label for="dataInicio" class="col-md-2 control-label">Inic&iacute;o:</label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="dataInicio"  name="dataInicio"
                                       placeholder="dd/mmm/aaaa hh:mm:ss"
                                       value="<fmt:formatDate pattern="dd/MM/yyyy hh:mm:ss" value="${compromisso.dataInicio}"/>"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="dataTermino" class="col-md-2 control-label">T&eacute;rmino: </label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" id="dataTermino" name="dataTermino"
                                       placeholder="dd/mmm/aaaa hh:mm:ss"
                                       value="<fmt:formatDate pattern="dd/MM/yyyy hh:mm:ss" value="${compromisso.dataTermino}"/>"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="diaInteiro" class="col-md-2 control-label">Dia inteiro? </label>
                            <div class="col-md-1">
                                <input type="checkbox" class="input-sm" id="diaInteiro" name="diaInteiro"
                                       value ="${compromisso.diaInteiro}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="usuarios" class="col-md-2 control-label">Convidar</label>
                            <div class="col-md-6">
                                <select class="form-control" id="usuarios" name="usuarios" maxlength="40"
                                        style="width:350px">

                                    <option value=''></option>
                                    <c:forEach items="${usuarios}" var="usu">                                                                                
                                        <c:set var="temUsu" value="0" scope="page"/>                                        
                                        <c:if test="${usuario.id ne usu.id }">                                                                                       
                                            <c:forEach items="${compromisso.usuarios}" var="usucomp" varStatus="" >

                                                <c:if test="${usucomp.id eq usu.id and temUsu==0}">
                                                    <c:set var="temUsu" value="1" scope="page"/>                                                    
                                                </c:if>                                                                                        
                                            </c:forEach>                                                                                
                                            <c:if test="${temUsu==0}"><option value='${usu.id}'>${usu.nome}</option></c:if>                                                    
                                        </c:if>                                         
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button id="incluiusuario" type="button" class="btn btn-primary" onclick="adicionaConvidado();">Adicionar <i class="glyphicon glyphicon-plus-sign"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="listaconvidados" class="col-md-2 control-label">Escolhidos</label>
                            <div class="col-md-6">
                                <select class="form-control" id="listaconvidados" name="listaconvidados" MULTIPLE>
                                    <c:forEach items="${compromisso.usuarios}" var="usu">
                                        <c:if test="${usuario.id ne usu.id}"><option value='${usu.id}'>${usu.nome}</option></c:if>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button id="removesuario" type="button" class="btn btn-danger" onclick="removeConvidado();">Remover  <i class="glyphicon glyphicon-trash"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="textareaDescricao" class="col-md-2 control-label">Descri&ccedil;&atilde;o:</label>
                            <div class="col-md-10">
                                <textarea id="descricao" name="descricao" class="form-control" rows="5" cols="55"
                                          value ="${compromisso.descricao}" maxlength="254"></textarea>
                            </div>
                        </div>
                        <div class="form-actions">                            
                            <button type="submit" class="btn btn-primary">Enviar</button>
                            <button type="reset" class="btn btn-default">Limpar</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <script>
        function adicionaConvidado()
        {
            var i = document.getElementById("usuarios").selectedIndex;
            var x = document.getElementById("usuarios").options[i];
            var y = document.getElementById("listaconvidados");
            var option = document.createElement("option");
            option = x;

            try
            {
                // for IE earlier than version 8
                y.add(option, null);
            }
            catch (e)
            {
                x.add(option, null);
            }
        }

        function removeConvidado()
        {
            var y = document.getElementById("listaconvidados");
            var x = document.getElementById("usuarios");
            var i = y.selectedIndex;
            var option = document.createElement("option");

            try
            {
                option = y.options[i];
                y.remove(i);
                x.add(option, null);
                x.selectedIndex = 0;
            }
            catch (e)
            {
                x.add(option, null);
            }
        }

        function selecionaTodos() {
            $('#listaconvidados option').prop('selected', 'selected');
        }

    </script>
</util:template>


